<template>
  <div id="app-music">
    <router-view @openDrawer="showDrawer = true" />

    <drawer v-model="showDrawer" @close="showDrawer = false" />

    <player-mini isApp />

    <playlist  />

    <copy ref="copy"/>

    <div id="bk-toast" />
  </div>
</template>

<script>
import Vue from 'vue'
import { NODE_ENV } from 'common/js/process'
import drawer from 'components/drawer/drawer'
import playerMini from 'components/player-mini'
import playlist from 'components/playlist/playlist'
import copy from 'components/copy'

export default {
  name: 'App',
  data () {
    return {
      showDrawer: false
    }
  },
  created () {
    /*eslint-disable*/
    window.appMusic = this
    const _this = this
    Vue.prototype.setStatusBarStyle = this.setStatusBarStyle
    let height = NODE_ENV === 'development' ? 25 : 0
    document.documentElement.style.setProperty('--status-bar-height',height + 'px')

    if (window.mui) {
      mui.plusReady(function () {
        height = Math.round(plus.navigator.getStatusbarHeight())
        console.log('状态栏高度：', height)
        _this.$store.dispatch('change_state', { key: 'StatusBarHeight', value: height })
        _this.setStatusBarStyle(_this.Themes)
        document.documentElement.style.setProperty('--status-bar-height',height + 'px')
      })
    }

    /*eslint-disable*/
    console.log('music-app',document.getElementById('Themes'))
    // document.getElementById('Themes').href = `static/themes/${this.Themes}.css`
    Vue.prototype.$ColorList = [
      {name: 'red', bg: '#e54d42', line: '#fadbd9'},
      {name: 'orange', bg: '#f37b1d', line: '#fde6d2'},
      {name: 'yellow', bg: '#fbbd08', line: '#fef2ce'},
      {name: 'olive', bg: '#8dc63f', line: '#e8f4d9'},
      {name: 'green', bg: '#39b54a', line: '#d7f0db'},
      {name: 'cyan', bg: '#1cbbb4', line: '#d2f1f0'},
      {name: 'blue', bg: '#0081ff', line: '#cce6ff'},
      {name: 'purple', bg: '#6739b6', line: '#e1d7f0'},
      {name: 'mauve', bg: '#9c26b0', line: '#ebd4ef'},
      {name: 'pink', bg: '#e03997', line: '#f9d7ea'},
      {name: 'brown', bg: '#a5673f', line: '#ede1d9'},
      {name: 'grey', bg: '#8799a3', line: '#e7ebed'}
    ]
    Vue.prototype.$config = {
      nav_bar_height: 44,
      tab_bar_height: 54,
      player_mini_height: 60
    }
    Vue.prototype.$copy = value => {
      this.$refs.copy.copy(value)
    }
  },
  methods: {
    setStatusBarStyle (Themes) {
      switch (Themes) {
        case 'white': return plus.navigator.setStatusBarStyle('dark') || null
        case 'black': return plus.navigator.setStatusBarStyle('light') || null
      }
    }
  },
  computed: {
    Themes() {
      return this.$store.state.Themes
    }
  },
  components: { drawer, playerMini, playlist, copy }
}
</script>

<style lang="less">
  @import url('common/style/index.less');
  #app-music {
    position: relative;
    inset: 0;
    height: 100%;
    font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: @color-background;
    color: @color-text;
  }
  :root {
    --nav-bar-height: 44px;
    --status-bar-height: 0px;
  }

</style>
